<!--
 * @Description: 保证金处理
 * @Author: liyujie
 * @Date: 2021/08/31
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/08/31
-->
<template>
    <PageLayout title="保证金处理">
        <template slot="header-right">
            <div
                class="back"
                @click="handleRoute('hireList')"
            >返回</div>
        </template>
        <!-- 筛选-->
        <template slot="filter">
            <div class="left">
                <div class="filter-item">
                    <el-radio-group
                        v-model="filterData.money_type"
                        size="medium"
                        @change="getTableData(1)"
                    >
                        <el-radio-button :label="1">充值记录</el-radio-button>
                        <el-radio-button :label="2">扣除记录</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="right">
                <el-button
                    type="primary"
                    size="medium"
                    :disabled="!authResult.auth_recharge"
                    @click="handleSetMoney(1)"
                >
                    充值保证金
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :disabled="!authResult.auth_deduct"
                    @click="handleSetMoney(2)"
                >
                    扣除保证金
                </el-button>
            </div>
        </template>
        <!--筛选-->
        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            ref="table"
            class="data-table"
            v-loading="tableLoading"
        >
            <el-table-column
                label="序号"
                align="center"
                width="80"
                type="index"
                key="0"
            />
            <el-table-column
                prop="reason"
                label="扣除原因"
                show-overflow-tooltip
                width="354"
                :formatter="emptyFormatter"
                key="-1"
                v-if="filterData.money_type === 2"
            />
            <el-table-column
                label="扣除凭证"
                align="center"
                key="-2"
                v-if="filterData.money_type === 2"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        style="padding: 0"
                        v-if="scope.row.certificate_images"
                        @click="fnShowPreview(scope.row.certificate_images, 0)"
                    >
                        查看({{ scope.row.certificate_images.length }})
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                label="当前保证金"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                key="-3"
                v-if="filterData.money_type === 2"
            >
                <template slot-scope="scope">
                    ￥{{ scope.row.before_money }}
                </template>
            </el-table-column>
            <el-table-column
                label="扣除金额"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                key="-4"
                v-if="filterData.money_type === 2"
            >
                <template slot-scope="scope">
                    ￥{{ scope.row.money }}
                </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="充值备注"
                show-overflow-tooltip
                width="354"
                :formatter="emptyFormatter"
                key="1"
                v-if="filterData.money_type === 1"
            />
            <el-table-column
                label="充值金额"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                key="2"
                v-if="filterData.money_type === 1"
            >
                <template slot-scope="scope">
                    ￥{{ scope.row.money }}
                </template>
            </el-table-column>
            <el-table-column v-if="filterData.money_type === 1"/>
            <el-table-column
                label="操作时间"
                align="left"
                :formatter="emptyFormatter"
                key="3"
            >
                <template slot-scope="scope">
                    {{ scope.row.history_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="admin_true_name"
                label="操作人"
                align="center"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                key="4"
            />
        </el-table>
        <!-- /table -->
        <template slot="pagination">
            <div/>
            <el-pagination
                layout="total, prev, pager, next, jumper"
                background
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </template>
        <img-preview ref="preview"/>
    </PageLayout>
</template>

<script>
import {back} from '@/mixin/back';
import { setMoneyDialog } from './set-money-dialog';
import ImgPreview from "@/components/common/img-preview";

export default {
    name: 'SetDepositMoney',
    mixins: [back],
    components: {ImgPreview},
    data() {
        return {
            filterData: {
                shop_no: '',
                money_type: 1,
            },
            tableData: [],
            tableLoading: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            shopInfo: {},
            authResult: {}
        };
    },
    computed: {},
    watch: {},
    filters: {},
    mounted() {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{title: "官网"}, {title: '企业数据列表', path: '/bid/hire-list'}, {title: '保证金处理'}]);
        this.authResult = this.$route.meta.authResult;
        this.filterData.shop_no = query.shop_no;
        this.getTableData();
        this.getShopInfo();
    },

    methods: {

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = {...this.filterData};

            params.page_id = page || this.page.now_page;
            this.$post('/student/shop_deposit%5Cget_history_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 获取店铺数据
         */
        getShopInfo() {
            this.tableLoading = true;
            let params = {
                shop_no: this.filterData.shop_no
            };

            this.$post('/student/shop_deposit%5Cget_shop_deposit_info', params, res => {
                if (res.code === 1) {
                    this.shopInfo = res.data;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 充值/扣除保证金
         * @param type 1充值 2扣除
         */
        async handleSetMoney(type) {
            await setMoneyDialog({
                type,
                shopInfo: this.shopInfo,
                shopNo: this.filterData.shop_no
            });

            this.getTableData();
            this.getShopInfo();
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
.back {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
}
/deep/ .filter-wrapper {
    justify-content: space-between;
    .left {
        display: flex;
    }
    .right {
        margin-top: -22px;
    }
}
</style>
